<template>
  <div class="employee">
    <page-search page-name="employee" :search-configs="contentConfigRef" 
    @on-query="handleQuery" @on-reset="handleRest"/>
    <page-content page-name="employee" :page-content-configs="contentConfigs" 
    ref="pageContentRef"/>
  </div>
</template>

<script lang="ts" setup>
import contentConfigs from './configs/content';
import searchConfis from './configs/search';

import usepageHook from '@/hooks/page-hook';
import { computed } from 'vue';
import usepageSelectHook from '@/hooks/page-select-hook';

const { pageSearch, pageContent,
        handleQuery, handleRest,
        pageContentRef } = usepageHook()

const pageSelectList =  usepageSelectHook('employee', 'deptList')

const contentConfigRef = computed(() => {
  const newpageSelectList = pageSelectList.value.map((item: any) => ({ label: item.dept, value: item.dept }))

  searchConfis.formItems.forEach(item => {
    if(item.type === 'select') {
      item.options.push(...newpageSelectList)
    }
  })

  return searchConfis
})

</script>
